<template lang="html">
  <d2-container>
    <page-header
      slot="header"
      ref="pageHeader"
      @doSearch="doSearch"
      @doReset="doReset"
      @doAdd="doAdd"
    />

    <!-- 中间内容容器 -->
    <div v-loading="loading" class="loading-wrapper">
      <el-table style="width: 100%" tooltip-effect="dark" :data="tableData" border stripe>
        <el-table-column type="index" width="50" label="序号" align="center" />
        <el-table-column
          prop="keyType"
          label="字典类型"
          align="center"
          show-overflow-tooltip
          min-width="120"
        />

        <el-table-column
          prop="keyName"
          label="字典名称"
          align="center"
          show-overflow-tooltip
          min-width="120"
        />


        <el-table-column label="字典状态" align="center" width="120">
          <template slot-scope="{ row }">
            <el-switch
              v-model="row.state"
              active-value="1"
              inactive-value="0"
              @change="statusChange(row)"
            />
          </template>
        </el-table-column>

        <el-table-column label="操作时间" align="center" show-overflow-tooltip width="200">
          <template slot-scope="{ row }"> {{ row.createTime }}</template>
        </el-table-column>

        <el-table-column label="操作" align="center" fixed="right" width="200">
          <template slot-scope="{ row }">
            <el-button v-has="'dataEdit'" type="text" @click="doEdit(row)">修改</el-button>
            <el-button v-has="'dataConfig'" type="text" @click="doConfig(row, 1)"
              >字典配置</el-button
            >
            <el-button
              v-if="row.state !== '1'"
              v-has="'dataDel'"
              type="text"
              class="danger"
              @click="doDel(row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 新增 -->
    <data-dialog
      :dialogVisible.sync="dataDialogVisible"
      :currentRowObj="currentRowObj"
      @success="getTableData"
    />

    <!-- 字典配置 -->
    <dict-config-draw
      :dialogVisible.sync="dictConfigDrawVisible"
      :currentRowObj="currentRowObj"
      @success="getTableData"
    />

    <!-- 底部分页 -->
    <footer-page
      slot="footer"
      :pageSize="pageSize"
      :currentPage="currentPage"
      :total="total"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
    />
  </d2-container>
</template>

<script>
import PageHeader from "./components/page-header";
import DataDialog from "./components/data-dialog";
import DictConfigDraw from "./components/dict-config-draw";
import { DictList, DictDel, DictStatusChange } from "api/sys/dict";
import tableMixinKeepAlive from "mixins/tableMixinKeepAlive";

export default {
  name: "system-dict",
  components: {
    PageHeader,
    DataDialog,
    DictConfigDraw,
  },
  mixins: [tableMixinKeepAlive],
  data() {
    return {
      // 新增、编辑开关
      dataDialogVisible: false,
      // 字典配置开关
      dictConfigDrawVisible: false,
      // 列表接口名
      getTableListSyncMethod: DictList,
      // 当前行数据
      currentRowObj: null,
    };
  },
  methods: {
    /**
     * 新增
     */
    doAdd() {
      this.currentRowObj = null;
      this.dataDialogVisible = true;
    },
    /**
     * 字典配置
     */
    doConfig(row) {
      this.currentRowObj = row;
      this.dictConfigDrawVisible = true;
    },
    /**
     * 编辑
     */
    doEdit(row) {
      const { id, keyName, keyType } = row;
      this.currentRowObj = { id, keyName, keyType };
      this.dataDialogVisible = true;
    },
    /**
     * 删除
     */
    async doDel(row) {
      await this.$myConfirm("删除本条数据字典");
      try {
        const { id } = row;
        await DictDel(id);
        this.$message.success("数据字典删除成功");
        this.getTableData();
      } catch (e) {
        console.log(e);
      }
    },
    /**
     * 列表数据格式化
     */
    tableDataFormat(data) {
      data.map((item) => {
        const { state } = item;
        item.originStatus = state;
      });
      return data;
    },
    /**
     * 启用、停用
     */
    async statusChange(row) {
      const { id, keyName, originStatus } = row;
      // 重置回去
      row.state = originStatus;
      const flag = row.state === "1";
      const str = flag ? "停用" : "启用";
      try {
        await this.$myConfirm(`<b>${str}</b>字典: <b>${keyName}</b> `);
        await DictStatusChange(id);
        const newStatus = flag ? "0" : "1";
        row.state = row.originStatus = newStatus;
        this.$message.success(`字典${str}成功`);
      } catch (e) {
        console.log(e);
        this.$message.error(`字典${str}失败`);
      }
    },
  },
};
</script>
